<template>
    <div class="cd-wrapper">
        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">基本资料</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">店铺名称：</el-col>
                <el-col :span="8" class="col_2">{{productDetail.shopName}}</el-col>
                <el-col :span="4" class="col_3">商品名称：</el-col>
                <el-col :span="8" class="col_4">{{productDetail.goodsName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 col_extra">商品类目：</el-col>
                <el-col :span="8" class="col_2 col_extra">{{productDetail.goodsTheme}}</el-col>
                <el-col :span="4" class="col_3 col_extra">商品图片：</el-col>
                <el-col :span="8" class="col_4 col_extra"><img class="product-img" :src="productDetail.defaultImgUrl" /></el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">售价：</el-col>
                <el-col :span="8" class="col_2">US$ {{productDetail.price}}</el-col>
                <el-col :span="4" class="col_3">库存：</el-col>
                <el-col :span="8" class="col_4">{{productDetail.inventory}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 col_bottom">重量：</el-col>
                <el-col :span="8" class="col_2 col_bottom">{{productDetail.weight}} kg</el-col>
                <el-col :span="4" class="col_3 col_bottom">发布时间：</el-col>
                <el-col :span="8" class="col_4 col_bottom">{{productDetail.releaseDate}}</el-col>
            </el-row>
        </div>

        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">商品规格</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">价格：</el-col>
                <el-col :span="8" class="col_2">US$ {{productDetail.price}}</el-col>
                <el-col :span="4" class="col_3">库存：</el-col>
                <el-col :span="8" class="col_4">{{productDetail.inventory}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 col_bottom">重量：</el-col>
                <el-col :span="8" class="col_2 col_bottom">{{productDetail.weight}} kg</el-col>
            </el-row>
        </div>

        <div class="table table-extra">
            <el-row class="header_row">
                <el-col :span="24">商品详情</el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div id="content"></div></el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Row, Col, Form, FormItem, Input, Select, Option, Radio, DatePicker,Tabs,TabPane,Tree,Pagination,
        Cascader, ButtonGroup, Button, Table, TableColumn, Checkbox, Message, MessageBox
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import { formatDate } from '../../assets/js/common.js';
    import { addUS } from '../../assets/js/option.js';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Radio);
    Vue.use(DatePicker);
    Vue.use(Cascader);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(Tree);
    Vue.use(Pagination);
    Vue.use(TableColumn);
    Vue.use(Checkbox);

    export default {
        head(){
            return {
                title: "商品详情",
                meta: [
                    { hid: 'product-index', name: 'product-index', content: 'product-index' }
                ]
            }
        },
        data () {
            return {
                productDetail:{}
            }
        },
        methods: {
            getProductDetail(shopId,goodsId) {
                this.$store.dispatch('productDetail', {shopId:shopId,goodsId:goodsId})
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.successed && result.data) {
                            this.productDetail = result.data;
                            this.productDetail.releaseDate = formatDate(this.productDetail.releaseDate,'YYYY-MM-dd hh:mm:ss');
                            document.getElementById('content').innerHTML = this.productDetail.content;
                        }
                    })
            }
        },
        created() {
            this.getProductDetail(this.$route.query.shopId,this.$route.query.goodsId);
        }
    }
</script>

<style lang="scss">
    .product-img {
        width: 100px;
        vertical-align: text-top;
    }
    .table:first-child {
        margin-top: 0;
    }
    .table {
        margin-top: 40px;
        border: 1px solid #ccc;
        font-size: 14px;

        .header_row {
            border-bottom: 1px solid #ccc;
            line-height: 40px;
            font-weight: bold;
            color: #008dd8;
            text-indent: 10px;
            background: #f1f2f2;
        }

        .col_2, .col_4 {
            text-align: left;
            text-indent: 3px;
        }

        .col_1, .col_3 {
            text-align: right;
            background: #f1f2f2;
        }
        .col_1_extra {
            text-align: center;
        }

        .col_1, .col_2, .col_3 {
            border-right: 1px dotted #ccc;
            border-bottom: 1px dotted #ccc;
            &:last-child {
                border-bottom: none
            }
        }
        .col_4 {
            border-bottom: 1px dotted #ccc;
        }

        .col_bottom {
            border-bottom: none
        }

        .el-col {
            height: 40px;
            line-height: 40px;
        }
        .col_extra {
            height: 120px
        }
    }
    .table-extra .el-col {
        height: auto;
    }
</style>